import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import type { ReportNames } from "@/queries/reports";

export function RangeToggleGroup({ reports }: { reports: ReportNames }) {
  return (
    <div className="grid grid-cols-4 gap-4">
      <div className="flex items-center gap-2">
        <Select defaultValue={reports.length > 0 ? reports[0].name : ""}>
          <SelectTrigger size="sm" className="w-full">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>Task</SelectLabel>
              {reports.map((report) => (
                <SelectItem value={report.name} key={report.name}>
                  {report.name}
                </SelectItem>
              ))}
            </SelectGroup>
          </SelectContent>
        </Select>
        <ToggleGroup type="single" variant="outline" size="sm" defaultValue="m">
          <ToggleGroupItem value="m">M</ToggleGroupItem>
          <ToggleGroupItem value="q">Q</ToggleGroupItem>
          <ToggleGroupItem value="y">Y</ToggleGroupItem>
        </ToggleGroup>
      </div>
    </div>
  );
}
